<template>
  <div class="app-container">
    <div class="my-tip">
      <el-form :inline="true" :model="searchForm" size="small" class="demo-form-inline">
        <el-form-item label="流程类型">
          <el-select v-model="searchForm.type" placeholder="请选择流程类型">
            <el-option label="全部" value="" />
            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row class="my-button">
      <el-button type="primary" size="mini" @click="dialogVisible=true">新增</el-button>
    </el-row>
    <div class="my-table">
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" width="80" />
        <el-table-column
          prop="vcreateBy"
          label="申请人"
          width="180"
        />
        <el-table-column
          prop="vflowId"
          label="流程类型"
        />
        <el-table-column
          prop="description"
          label="申请描述"
        />
        <el-table-column
          width="180"
          prop="sleaveTime"
          label="创建时间"
          :formatter="formatterDate"
        />
        <el-table-column
          prop="eleaveTime"
          width="180"
          label="结束时间"
          :formatter="formatterDate"
        />
      </el-table>
      <div class="my-page">
        <el-pagination
          :page-sizes="pageSizeList"
          :current-page="page.pageIndex"
          :page-size="page.pageSize"
          :total="page.total"
          background
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      title="增加审批"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      @closed="onCloseDialog"
    >
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="流程类型：" prop="flowId">
          <el-select v-model="form.flowId" clearable placeholder="请选择">
            <el-option value="" label="请选择" />
            <el-option v-for="item in typeList " :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间：" prop="date">
          <el-date-picker
            v-model="form.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <el-form-item label="备注：" prop="description">
          <el-input v-model="form.description" type="textarea" />
        </el-form-item>
        <el-form-item label="审批人列表：" prop="approvalPerson">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in form.approvalPerson"
              :key="index"
              timestamp="审批时间："
            >
              <el-tag>{{ activity.vapproveBy }}</el-tag>
            </el-timeline-item>
          </el-timeline>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onConfrim">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableMixin from '@/mixins/tableMixin'
import dayjs from 'dayjs'
import formMixin from '@/mixins/formMixin'

export default {
  name: 'Approval',
  mixins: [tableMixin, formMixin],
  data() {
    return {
      searchForm: {
        type: '',
        userId: localStorage.getItem('userId')
      },
      dataList: [],
      typeList: [],
      dialogVisible: false,
      formLabelWidth: '120px',
      form: {
        flowId: '',
        description: '',
        createBy: localStorage.getItem('userId'),
        sLeaveTime: '',
        eLeaveTime: '',
        date: '',
        approvalPerson: [] // 审批人
      },

      loading: false,
      rules: {
        flowId: [
          { required: true, message: '请选择流程类型', trigger: 'change' }
        ],
        date: [
          { type: 'array', required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    'form.flowId'(val) {
      if (val) {
        this.getApprovalPerson(val)
      }
    }
  },
  created() {
    this.getType()
    this.getDataList()
  },
  methods: {
    formatterDate(row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    getDataList() {
      this.dataListLoading = true
      this.$api.approval.createApproveListApi(
        {
          ...this.searchForm,
          ...this.page
        }
      ).then(res => {
        if (res.code === this.$code) {
          this.page.total = res.data.totalSize
          this.dataList = res.data.content
        }
      }).finally(() => {
        this.dataListLoading = false
      })
    },
    getApprovalPerson(id) {
      this.$api.approval.getApprovalPersonApi({ totalId: id }).then(res => {
        if (res.code === this.$code) {
          this.form.approvalPerson = res.data
        }
      })
    },
    getType() {
      this.$api.approval.getApproveTypeApi().then(res => {
        if (res.code === this.$code) {
          this.typeList = res.data
        }
      })
    },
    onCloseDialog() {
      this.$refs['ruleForm'].resetFields()
    },
    onConfrim() {
      const form = this.form

      this.$refs['ruleForm'].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.loading = true
          form.sLeaveTime = form.date[0]
          form.eLeaveTime = form.date[1]
          this.$api.approval.postApplyApi(form).then(res => {
            if (res.code === this.$code) {
              this.dialogVisible = false
              this.loading = false
              this.getDataList()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
